import React from 'react'
import { Outlet, useNavigate, useLocation } from "react-router-dom"

export default function Home() {
  const navigate = useNavigate();
  // const location =  useLocation();
  // console.log(location,"location");
  const toMusicHandle = () => {
    navigate("/Main/Home/Music/?user=李沛化&id=002",
      {
        state: [
          { id: "001", name: "最伟大的作品" },
          { id: "002", name: "夜曲" },
          { id: "003", name: "爷爷泡的茶" },
          { id: "004", name: "求佛" },
          { id: "005", name: "白狐" }
        ]
      })


  }
  const toNewsHandle = () => {
    navigate("/Main/Home/News/?user=李沛化&id=001", {
      state: [
        { id: "001", name: "空间站国旗与地球同框" },
        { id: "002", name: "罗永浩谈钟薛高卖得贵" },
        { id: "003", name: "麦当劳员工将掉地上面包放回货架" },
      ]
    })
  }

  return (
    //如果使用Link NavLink跳转 button元素会变成a标签 这种方式被称为声明式路由导航所以使用useNavigate
    //useNavigate() 编程式路由导航
    <div>
      <h3>我是Home的内容</h3>
      <button onClick={toMusicHandle}>Music</button>
      <button onClick={toNewsHandle}>News</button>
      <Outlet />
    </div>
  )
}
